import React, { useEffect, useState } from "react";
import { useParams, useNavigate } from "react-router-dom";
import { NavBar, Toast, Popup, TextArea, Button } from "antd-mobile";
import { useDispatch, useSelector } from "react-redux";
import { suggetionList, sugGetion, myAnswer } from "store/Lzk_Store/Patint";
import "./index.scss";

const Index = () => {
  const { id } = useParams();
  const sickCircleId = id;
  const dispatch = useDispatch<any>();
  const suglist = useSelector(suggetionList);
  const navigate = useNavigate();
  const [state, setState] = useState("true");
  const [visible1, setVisible1] = useState(false);
  const [value, setValue] = useState("");
  //   console.log(suglist);

  useEffect(() => {
    dispatch(sugGetion(sickCircleId));
  }, [dispatch, sickCircleId]);

  const back = () => {
    navigate(-1);
  };

  const disappear = () => {
    setState("false");
    setVisible1(true);
  };

  const answer = () => {
    Toast.show({
      content: "调取键盘",
    });
  };

  const data = {
    sickCircleId: id,
    content: value,
  };

  const myanswer = () => {
    dispatch(myAnswer(data)).then((res: any) => {
      if (res) {
        Toast.show({
          content: `${res.payload.message}`,
        });
        setVisible1(false);
      }
    });
  };

  return (
    <div className="suggestion">
      <div className="top">
        <NavBar onBack={back}>
          急寻：{suglist ? `${suglist.title}` : "阳痿"}的治疗方法
        </NavBar>
      </div>
      <div className="main">
        <div className="name">{suglist ? `${suglist.authorName}` : "张三"}</div>
        <div>
          <div className="mar">[病症]</div>
          <div>{suglist ? `${suglist.authorName}` : "面神经炎"}</div>
        </div>
        <div>
          <div className="mar">[科室]</div>
          <div>{suglist ? `${suglist.departmentName}` : "内科"}</div>
        </div>
        <div>
          <div className="mar">[病症详情]</div>
          <div>{suglist ? `${suglist.detail}` : "爱上对方过后就快乐"}</div>
        </div>
        <div>
          <div className="mar">[治疗经历]</div>
          <div className="zl">
            <div className="zl-item">
              <span>{suglist ? `${suglist.treatmentHospital}` : "11111"}</span>
              <span>
                {suglist ? `${suglist.treatmentStartTime}` : "11111"}-
                {suglist ? `${suglist.treatmentEndTime}` : "11111"}
              </span>
            </div>
            <div>
              {suglist
                ? `${suglist.treatmentProcess}`
                : "111111111111111111111111111111111"}
            </div>
          </div>
        </div>
        <div className="img">
          <div className="mar">[相关图片]</div>
          <img
            src={
              suglist
                ? `${suglist.picture}`
                : "https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"
            }
            alt=""
          />
        </div>
      </div>
      <div className="foot">
        {/* <div className="bi">30H币</div>
        <div className="btn" onClick={disappear}>
          我来解答
        </div> */}

        {state === "true" && (
          <>
            <div className="bi">30H币</div>
            <div className="btn" onClick={disappear}>
              我来解答
            </div>
          </>
        )}
        {state === "false" && (
          <>
            <div className="myanswer" onClick={answer}>
              我的解答
            </div>
          </>
        )}
      </div>
      {/* 弹窗 */}
      <Popup
        visible={visible1}
        showCloseButton
        onMaskClick={() => {
          setVisible1(false);
        }}
        onClose={() => {
          setVisible1(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: "8px",
          borderTopRightRadius: "8px",
          minHeight: "40vh",
        }}
      >
        <>
          <div className="item">
            <TextArea
              placeholder="请输入内容"
              value={value}
              onChange={(val) => {
                setValue(val);
              }}
            />
            <div className="pup-btn">
              <Button block color="primary" size="middle" onClick={myanswer}>
                确定
              </Button>
            </div>
          </div>
        </>
      </Popup>
    </div>
  );
};
export default Index;
